<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let user={
            name:"tom",
            age:20,
            sex:"男"
        };
        // js中的对象属性是无序的
        // ES6中对象的解构通过对象的属性名的方式进行取值的

        // 1.基本解构(不完全解构)
            // 根据属性名取出对象中的对应值


        let {age,name}=user;
        console.log(age);
        console.log(name);

        // 2.完全解构
        let user2={
            username:"tom",
            ages:20,
            sex:"男"
        };
        let {username,ages,sex}=user2;
        console.log(username,ages,sex);

        //3.重命名解构
        let user3={
            name:"alice",
            age:12,
            sex:"男"
        };
        let {name:myName,age:myage,sex:mysex}=user3;
        console.log(myName,myage,mysex);

        //4.剩余解构
            // 将剩余的key和value参数合并成一个新的对象
            // 剩余解构的语法必须位于解构表达式的最后一位
        let objs={
            a:"alice",
            b:"baby",
            c:"cici",
            d:"david"
        };

        // let {a,...newObj,d}=objs;//报错
        let {a,d,...newObj}=objs;
        console.log(a,d);
        console.log(newObj);

        //5.模式匹配错误
      /* 
        g变量匹配不到，对应的值是undefined
        h变量设置了默认值
        当i匹配到数据，并且同时设置了默认值，最终的匹配的值(匹配值优先，默认值在后) */
        let {g,h="xixi",e:ee,i:myI="haha"}={e:"ELLA",f:"frank",i:"hehe"};
        console.log(g,h,ee,myI);


        //6.对象多层结构
        //嵌套对象结构时可以对解构的对象进行二次解构
        let data={
            status:true,
            msg:"元旦在家学习",
            film:{
                fname:"哈哈",
                fyear:2020,
                ftype:"言情"
            }
        };

        let {status,film:{fname,ftype}}=data;
        console.log(status);
        console.log(fname,ftype);

        console.log(data.status);
        console.log(data.film.fname);
        console.log(data.film.ftype);

        //多元嵌套
        let datas={
            status2:true,
            msgs:"我是消息",
            lists:[
                {aa:1,bb:2},
                {aa:3,bb:4},
                {aa:5,bb:6}

            ]
        };

        let {status2,lists:[,{aa}]}=datas;
        console.log(status2,aa);

        let datas2=[
                {aaa:1,bbb:2},
                {aaa:3,bbb:4},
                {aaa:5,bbb:6}

        ];

        let [,,{bbb}]=datas2;
        console.log(bbb);

        // 7.为已经定义的变量进行对象的解构赋值
        let a1;
        let a2;
        let objs2={
            a1:"我是a1",
            a2:"我是a2"
        };
        ({a1,a2}=objs2);
        console.log(a1,a2);
    </script>
</head>
<body>
    
</body>
</html>